<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
<<<<<<< HEAD
<<<<<<< HEAD
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-10 21:48:26
=======
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-10 17:52:23
>>>>>>> 9412502b99b728a658dcbd89e9bfe2e3bf5302b5
-->
<template>
  <!--1. 容器 -->
  <div ref="buttom3" style="height: 95%"></div>
</template>
<script>
import {Column} from '@antv/g2plot';

export default {
  data() {
    return {
      dataArr:[
          {
            name: '老师',
            province: '京',
            number: 6,
          },{
            name: '老师',
            province: '津',
            number: 5,
          },{
            name: '老师',
            province: '冀',
            number: 13,
          },{
            name: '老师',
            province: '晋',
            number: 524,
          },{
            name: '老师',
            province: '黑',
            number: 35,
          },{
            name: '老师',
            province: '吉',
            number: 1,
          },{
            name: '老师',
            province: '辽',
            number: 1,
          },{
            name: '老师',
            province: '新',
            number: 2,
          },{
            name: '老师',
            province: '蒙',
            number: 3,
          },{
            name: '老师',
            province: '藏',
            number: 5,
          },{
            name: '老师',
            province: '陕',
            number: 5,
          },{
            name: '老师',
            province: '甘',
            number: 4,
          },{
            name: '老师',
            province: '宁',
            number: 6,
          },{
            name: '老师',
            province: '川',
            number: 7,
          },{
            name: '老师',
            province: '渝',
            number: 1,
          },{
            name: '老师',
            province: '鲁',
            number: 1,
          },{
            name: '老师',
            province: '云',
            number: 1,
          },{
            name: '老师',
            province: '豫',
            number: 0,
          },{
            name: '老师',
            province: '赣',
            number: 1,
          },{
            name: '老师',
            province: '贵',
            number: 0,
          },{
            name: '老师',
            province: '湘',
            number: 1,
          },{
            name: '老师',
            province: '海',
            number: 0,
          },{
            name: '老师',
            province: '晥',
            number: 0,
          },{
            name: '老师',
            province: '沪',
            number: 0,
          },{
            name: '老师',
            province: '浙',
            number: 4,
          },{
            name: '学生',
            province: '京',
            number: 10,
          },{
            name: '学生',
            province: '津',
            number: 102,
          },{
            name: '学生',
            province: '冀',
            number: 252,
          },{
            name: '学生',
            province: '晋',
            number: 5241,
          },{
            name: '学生',
            province: '黑',
            number: 542,
          },{
            name: '学生',
            province: '吉',
            number: 121,
          },{
            name: '老师',
            province: '辽',
            number: 32,
          },{
            name: '学生',
            province: '新',
            number: 54,
          },{
            name: '学生',
            province: '蒙',
            number: 26,
          },{
            name: '学生',
            province: '藏',
            number: 45,
          },{
            name: '学生',
            province: '陕',
            number: 421,
          },{
            name: '学生',
            province: '甘',
            number: 123,
          },{
            name: '学生',
            province: '宁',
            number: 52,
          },{
            name: '学生',
            province: '川',
            number: 125,
          },{
            name: '学生',
            province: '渝',
            number: 123,
          },{
            name: '学生',
            province: '鲁',
            number: 352,
          },{
            name: '学生',
            province: '云',
            number: 75,
          },{
            name: '学生',
            province: '豫',
            number: 875,
          },{
            name: '学生',
            province: '赣',
            number: 64,
          },{
            name: '学生',
            province: '贵',
            number: 45,
          },{
            name: '学生',
            province: '湘',
            number: 10,
          },{
            name: '学生',
            province: '海',
            number: 5,
          },{
            name: '学生',
            province: '晥',
            number: 4,
          },{
            name: '学生',
            province: '沪',
            number: 3,
          },{
            name: '学生',
            province: '浙',
            number: 12,
          },
          
      ]
    }
  },
  mounted() {
    this.initChart();
  },
  methods:{
    initChart(){
      const column = new Column(this.$refs.buttom3, {
        data: this.dataArr,
        isGroup: true,
        xField: 'province',
        yField: 'number',
        seriesField: 'name',
        xAxis: {
          label: {
            rotate:0,
            offset: 10,
          }
        },
        
        label: {
            // 可手动配置 label 数据标签位置
            position: 'middle', // 'top', 'middle', 'bottom'
            // 可配置附加的布局方法
            layout: [
              // 柱形图数据标签位置自动调整
              { type: 'interval-adjust-position' },
              // 数据标签防遮挡
             { type: 'interval-hide-overlap' },
              // 数据标签文颜色自动调整
              { type: 'adjust-color' },
            ],
          },
      });

      column.render();

    }
  }
}

</script>>



